var imgs=['img/c1.jpg','img/c2.jpg','img/c3.jpg','img/c4.jpg'];
/* 设置默认显示第一张 */
/* 根据标签名获取元素，返回值是数组 */
var img=document.getElementsByTagName('img')[0]; 
img.setAttribute('src',imgs[0]);
/* var ul=document.getElementsByTagName('ul')[0]; */
var ul=document.getElementById('box1-ul');
var mywidth=imgs.length*8+(imgs.length+1)*10;
ul.style.width=mywidth+'px';
ul.style.marginLeft=-mywidth/2+'px';
for(var i=0;i<imgs.length;i++){
	ul.innerHTML+='<li></li>';	
}
var dots=ul.getElementsByTagName('li');
dots[0].className='cherk';
var mIndex=0;
//改变数组下标
function changeIndex(){
	if(mIndex>=3){
		mIndex=0;
	}
	else{
		mIndex++;
	}
	img.setAttribute('src',imgs[mIndex]);
	for(var i=0;i<dots.length;i++){
		dots[i].className='';
	}
	dots[mIndex].className='cherk';
}

//定时器
var timer=null;
timer=setInterval(changeIndex,2000);//调用方法名 
//当放在小点上,显示小点对应的图片
for(var i=0;i<dots.length;i++)
{
	dots[i].index=i;
	dots[i].onmouseover=function(){//鼠标悬浮时
		clearInterval(timer);
		timer=null;
		img.setAttribute('src',imgs[this.index]);
		for(var i=0;i<dots.length;i++){
			dots[i].className='';
		}
		dots[this.index].className='cherk';
	}
	dots[i].onmouseout=function(){
		mIndex=this.index;
		timer=setInterval(changeIndex,2000)
	}
}
